<template>
  <el-form-item :label="placeholder" :prop="p" style="text-align:left">
    <el-select v-if="canSelect" v-model="value" filterable remote :loading="loading" :remote-method="remoteMethod"
      style="width: 100%;" :placeholder="placeholder" @change="dateChange()">
      <el-option v-for="i in itemName" :key="i.i" :label="i.q" :value="i.i">
      </el-option>
    </el-select>

    <span v-else v-for="(item, index) in all">

      <span v-if="item.i == value">{{ item.q }}</span>
    </span>
  </el-form-item>
</template>

<script>
export default {
  name: 'SItemForm',
  props: {
    p: "",
    value: "",
    canSelect: {
      type: Boolean,
      default: true
    }
  },
  data() {
    return {
      itemName: [],
      placeholder: "物料名称",
      all: [],
      initData: [],
      loading: false
    }
  },
  methods: {
    dateChange: function () {
      this.$emit('input', this.value);
      this.$emit('change', this.value);

    },
    remoteMethod(query) {

      if (query !== '') {
        this.loading = true;
        setTimeout(() => {
          this.loading = false;

          var q = query.toLowerCase();
          var data = [];
          for (var i = 0; i < this.all.length; i++) {
            if (data.length >= 10) {
              break;
            }
            var item = Object.assign({}, this.all[i]);
            item.q = item.c + "/" + item.n + "/" + item.g;
            if (item.q.indexOf(q) > -1) {
              data.push(item);
            }
          }
          this.itemName = data;
        }, 2);
      } else {
        this.itemName = this.initData;
      }
    }
  },
  created() {


    this.all = this.$store.state.dict.item;
    for (var i = 0; i < 10; i++) {
      var item = Object.assign({}, this.all[i])
      item.q = item.c + "/" + item.n + "/" + item.g;
      this.initData.push(item);
    }
    this.itemName = this.initData;


  }
}
</script>
 